<!DOCTYPE html><HTML><HEAD><meta name="renderer" content="webkit"><meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/><TITLE>健康辅助系统 数据上传</TITLE><META Name="keywords" Content="数据上传," />
    <META Name="description" Content="健康辅助系统,数据上传," />
    <META Name="format-detection" Content="telephone=no" />
    
    
    
    
    
    <META charset="UTF-8">
    <META content="IE=edge" http-equiv="X-UA-Compatible">
    <META name="renderer" content="webkit"><LINK rel="stylesheet" type="text/css" href="css/index.css"><script language="javascript" src="js/jquery-latest.min.js"></script><!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    
    <!--Announced by Visual SiteBuilder 9-->
    <link rel="stylesheet" type="text/css" href="css/_sitegray_d.css" />
    <script language="javascript" src="js/_sitegray.js"></script>
    <!-- CustomerNO:7765626265723230747f465453525742000000054156 -->
    <link rel="stylesheet" type="text/css" href="css/index.vsb.css" />
    <script type="text/javascript" src="js/vsbscreen.min.js" id="_vsbscreen" ></script>
    <script type="text/javascript" src="js/counter.js"></script>
    <script type="text/javascript">_jsq_(1001,'/index.jsp',-1,1391600553)</script>
    </HEAD>
    <BODY > <div style='width:0px;height:0px;overflow: hidden;'><img src=""  /></div>
    
    
    
    
    
    
    <style type="text/css">
    
    body{
                background-image:url(images/background02.jpg) ; 
            background-repeat:no-repeat;
            background-position:top;
            
    }
    .wrapper{
        width:100%; 
        background:url(images/logo.png) top center no-repeat; 
        min-height:800px; 
        background-size:100% 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background01.jpg',sizingMethod='scale');
    }
  .blockwhite {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  .title {
    font-size: 24px;
    color: #333;
  }
  .cont {
    margin-top: 20px;
  }
  .disease-list {
    height: 300px; /* 固定高度 */
    overflow-y: scroll; /* 显示垂直滚动条 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .disease-list div {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s;
  }
  .disease-list div:hover {
    background-color: #f0f0f0;
  }
  .disease-details {
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
    max-height: 140px; /* 设置最大高度，根据需要调整 */
    border: 1px solid #ccc; /* 边框样式 */
    padding: 10px; /* 内边距 */
    border-radius: 5px; /* 边框圆角 */
    margin-top: 10px; /* 与上方元素的间距 */
    display: none;
    }

/* 当内容超出.disease-details容器时显示滚动条 */
    .disease-details::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    }

    .disease-details::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }
    </style>
    <DIV class="mainCont"><!--header S-->
    <DIV class="dft-header">
    <DIV class="topbar clearfix">
    <DIV class="user-opr clearfix" style="height: 58px; float: right">
    
    <div style="clear:both;"></div>
    
    <script language="javascript" src="js/tsitesclick.js"></script>
     <div class="item lag"><a href=""></a></div>


<script> var _tsites_com_view_mode_type_=8;</script>
<div class="item"><a href=""  target=_blank title="华中科技大学" ></a></div>
</DIV>
    
    
    
    
    
    <script> var _tsites_com_view_mode_type_=8;</script>
    <div class="logo" style="float: left;">
        <img border="0" src="images/logo.png" title="健康平台logo" />
        <div style="color: white; margin-left: 10px; font-size: 36px; display: inline-block; vertical-align: top;">健康辅助检测平台</div>
    </div>
    </DIV><!--nav-->
    <DIV class="navBar clearfix">
    
    
                <ul class="navbox clearfix"  id="MenuBar1" style="width:1136px;overflow: hidden;height:52px">
     <li   ><h3><a href="function.html" style=" background: #4d90d2;">数据上传</a></h3>
                    </li>
    
     <li   class="fNiv"   ><h3><a href="quiry.html" >数据查询</a></h3></li>
    
     <li   class="fNiv"   ><h3><a href="discussion.html"  >讨论区</a></h3></li>
    </ul>
    
    
    
    
    
    </DIV></DIV><!--header E--><!--个人主页-->
    <DIV class="dft-main clearfix">
    <DIV class="dft-side"><!--教师个人-->
    <DIV class="blockwhite JS-display">
    <DIV class="js-top clearfix">
    
    <div class="photowrap">
                                <div class="img"><span><img id="u_u6_23212pic" border="0" /></span></div>
                            </div><script language="javascript" src="js/imagescale.js"></script>
    <script type="text/javascript"> 
     var path = localStorage.getItem("imagePath")
     var u_u6_pic = new ImageScale("u_u6_",140,140,true,true);u_u6_pic.addimg(path,"","张三","23212");
    </script>
    
    <DIV class="info"><h2>张三</h2><script> var _tsites_com_view_mode_type_=8;</script>
    <script language="javascript" src="js/tsitesencrypt.js"></script><div class="like"><i class="ico" src="images/background02.jpg" id="_parise_imgobj_u8"></i><span id="_parise_obj_u8"></span></div><script language="javascript" src="js/TsitesPraiseUtil.js"></script>
    <script> var _TsitesPraiseUtil_u8= new TsitesPraiseUtil();_TsitesPraiseUtil_u8.setParam({'nodeid':'_parise_obj_u8','iscanclickidobj':'iscanclick_parise_obj_u8','pdtype':'0','imageid':'_parise_imgobj_u8','apptype':'index','basenum':'0','uid':'23212','homepageid':144365,'limttype':'allpage','limithour':24,'contentid':0});</script>
    </DIV></DIV>  
    </DIV>





        <DIV class="blockwhite Psl-info">
            <DIV class="title clearfix">
                <I class="ico ico-1"></I>
                <DIV class="info">
                    <H2>个人信息</H2>
                    <P>Personal information</P>
                </DIV>
            </DIV>
            <DIV class="cont">
                <p id="account1">
                    用户名：<span id="accountValue1"></span>
                </p>
                <p id="account2">
                    uid：<span id="accountValue2"></span>
                </p>
                <p id="identity">
                    身份：用户
                </p>
            </DIV>
        </DIV>
    
    <script>
        var accountKey1 = 'username';
        var accountKey2 = 'userid';

        // 当文档加载完毕时执行
        document.addEventListener('DOMContentLoaded', function() {
            // 从 localStorage 获取账号信息
            var accountValue1 = localStorage.getItem(accountKey1);
            var accountValue2 = localStorage.getItem(accountKey2);

            // 将获取到的值显示在页面上
            document.getElementById('accountValue1').textContent = accountValue1;
            document.getElementById('accountValue2').textContent = accountValue2;
        });
    </script>
    </DIV><!--side-->





    <DIV class="dft-content clearfix">
        <DIV class="dft-midcont">
            <div class="blockwhite Psl-info">
                <div class="title clearfix">
                    <i class="ico ico-4"></i>
                    <div class="info"><h2>图片上传</h2><p>Image upload</p></div>
                </div>
                <div class="cont">
                    <!-- 图片预览区域 -->
                    <div id="imagePreview" style="text-align: center; margin-bottom: 10px; width: 250px; height: 400px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;">
                        <p>请选择图片</p>
                        <img src="" id="previewImage" alt="预览图" style="max-width: 100%; display: none;" />
                    </div>
                    <!-- 文件输入和上传按钮 -->
                    <input type="file" id="imageUpload" accept="image/*" />
                    <button id="uploadButton" style="display: none; padding: 10px 20px; font-size: 16px; color: white; background-color: #4CAF50; border: none; border-radius: 5px; cursor: pointer; margin-left: auto; margin-right: auto; width: 200px;">上传图片</button>
                    <!-- 上传后的文件名显示 -->
                    <div id="loadingModal" style="display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;  justify-content: center; align-items: center;">
                        <div style="background-color: white; padding: 20px; border-radius: 5px;">
                            上传成功，正在调用图像分析API，请稍候...
                        </div>
                    </div>
                    <div id="imageInfo"></div>
                </div>
            </div>
        </DIV>

        <script>
            document.getElementById('imageUpload').addEventListener('change', function(e) {
                var files = e.target.files;
                if (files.length > 0) {
                    var file = files[0];
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        // 显示图片预览
                        var previewImage = document.getElementById('previewImage');
                        previewImage.src = e.target.result;
                        previewImage.style.display = 'block';
                        document.getElementById('imagePreview').querySelector('p').style.display = 'none'; // 隐藏“请选择图片”文本
                        document.getElementById('uploadButton').style.display = 'block'; // 显示上传按钮
                    };
                    reader.readAsDataURL(file);
                }
            });

            document.getElementById('uploadButton').addEventListener('click', function() {
                var files = document.getElementById('imageUpload').files;
                if (files.length > 0) {
                    var formData = new FormData();
                    formData.append('image', files[0]); // 'image' 是后端接收文件的键名

                    // 从 localStorage 获取用户信息
                    var uid = localStorage.getItem('userid');
                    var username = localStorage.getItem('username');
                    var userpic = localStorage.getItem('userpic');

                    // 创建用户信息 JSON 对象
                    var userInfo = {
                        uid: uid,
                        username: username,
                        userpic: userpic
                    };

                    // 将用户信息添加到 FormData 中，键为 "data"
                    formData.append('data', JSON.stringify(userInfo)); // 将 JSON 对象转换为字符串

                    // 访问的后端API
                    var ipAdress = localStorage.getItem('ip'); // 获取用户IP地址
                    var apiUrl = ipAdress + 'data/upload';

                    // 发送AJAX请求上传图片
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', apiUrl); // 替换为你的后端API URL
                    xhr.onload = function() {
                        if (xhr.status === 201) {
                            // 上传成功后的处理
                            var response = JSON.parse(xhr.responseText);
                            document.getElementById('imageInfo').textContent = '已上传文件：' + response.fileName; // 假设后端返回文件名

                            // 显示加载模态框
                            document.getElementById('loadingModal').style.display = 'flex';

                            // 调用分析图像API
                            callImageAnalysisAPI(uid);

                        } else {
                            // 错误处理
                            console.error('上传失败');
                        }
                    };
                    xhr.send(formData);
                }
            });

            // 调用图像分析API的函数
            function callImageAnalysisAPI(uid) {
                var formData = new FormData();
                formData.append('uid', uid); // 'uid' 是后端接收用户ID的键名

                // 访问的后端API
                var ipAdress = localStorage.getItem('ip'); // 获取用户IP地址
                var apiUrl = ipAdress + 'data/analyse';

                var xhr = new XMLHttpRequest();
                xhr.open('POST', apiUrl); // 替换为图像分析的后端API URL

                xhr.onload = function() {
                    if (xhr.status === 200) {
                        // 分析成功后的处理
                        var analysisResponse = JSON.parse(xhr.responseText);
                        console.log('分析结果:', analysisResponse);
                        // 隐藏加载模态框
                        document.getElementById('loadingModal').style.display = 'none';
                        // 你可以根据分析结果更新界面，例如显示健康报告等
                    } else {
                        console.error('图像分析失败:', xhr.statusText);
                        // 隐藏加载模态框
                        document.getElementById('loadingModal').style.display = 'none';
                    }
                };

                xhr.send(formData); // 发送用户数据的JSON字符串
            }
        </script>




<div class="dft-rightcont">
    <div class="blockwhite Rsh-focus">
      <div class="title clearfix">
        <i class="ico ico-8"></i>
        <div class="info"><h2>疾病详情</h2><p>Disease Details</p></div>
      </div>
      <div class="cont">
        <div class="disease-list">
          <!-- 疾病名称列表 -->
          <div onclick="showDetails('肺不张', '肺不张是指肺或部分肺（也称为肺叶）萎陷的状况，当肺部的微小气囊（称为肺泡）漏气时就会出现这一状况。肺不张是术后最常见的呼吸并发症之一，也可能是其他呼吸问题的并发症，例如囊性纤维化、肺肿瘤、胸部损伤、肺部积液和呼吸无力。吸入异物也可能导致肺不张。该医疗状况会造成呼吸困难，特别是对于已患有肺病的患者。治疗取决于导致萎陷的原因以及萎陷的严重程度。')">肺不张</div>
          <div onclick="showDetails('变实', '浸润通常是指人体组织内侵入异常细胞，或出现了正常情况下不应出现的机体细胞，以及某些病变组织向周围扩散的现象。在炎症时，各种炎症细胞浸润炎症组织，这是机体抗损伤的防御功能表现。肿瘤细胞可以浸润周围的正常组织，这称为肿瘤细胞浸润，往往是恶性肿瘤的特征。')">变实</div>
          <!-- 根据需要添加更多疾病 -->
          <div onclick="showDetails('浸润', '同上，浸润是指人体组织内侵入异常细胞，或出现了正常情况下不应出现的机体细胞，以及某些病变组织向周围扩散的现象。')">浸润</div>
          <div onclick="showDetails('气胸', '气胸是指空气渗入肺部和胸壁之间的空间时导致肺部分或完全萎陷的状况。典型体征包括气胸侧触觉语颤消失、叩诊呈过清音、呼吸音减低。气体量大则可使患侧胸部隆起，可见气管移向对侧。张力性气胸还可以出现血压降低。')">气胸</div>
          <div onclick="showDetails('水肿', '水肿是全身气化功能障碍的一种表现。水肿的形成主要与肺脾肾三脏有关。肺失宣降，不能通调水道，聚水而为水肿。脾失运化水湿之能，湿聚而为水肿。肾主水，肾阳虚衰，不能化气行水，则水湿泛溢。三脏又相互影响。')">水肿</div>
          <div onclick="showDetails('肺气肿', '肺气肿是肺泡壁的破坏导致肺泡腔异常扩大的病理状态。吸烟是最重要的引起肺气肿的原因。随着吸烟时间的延长，香烟烟雾中的有害物质如尼古丁、焦油等会损伤肺，破坏肺泡的结构，诱发肺气肿形成。')">肺气肿</div>
          <div onclick="showDetails('纤维变性', '纤维变性是指纤维组织取代病灶中的细胞成分，成为病变组织的主要成分。分为局限性和弥漫性两种。局限性纤维化常见于慢性炎性、结核修复、愈合期表现。弥漫性纤维化常见于弥漫性间质性病变，病理上以肺间质为主的渗出或漏出、炎性细胞或肿瘤细胞浸润、纤维结缔组织和肉芽组织增生。')">纤维变性</div>
          <div onclick="showDetails('积液', '胸腔积液是指在胸膜腔内积聚过多的液体。这种情况可能由多种原因引起，包括心脏疾病、肺部感染、肺癌等。积液可能导致呼吸困难和胸痛。')">积液</div>
          <div onclick="showDetails('肺炎', '肺炎是肺部感染，可由细菌、病毒或真菌引起。症状包括发热、咳嗽、咳痰，可能伴有胸痛和呼吸困难。肺炎的治疗取决于病原体类型和严重程度，可能包括抗生素或抗病毒药物。')">肺炎</div>
          <div onclick="showDetails('胸膜增厚', '胸膜增厚并不是一种独立的疾病，而是一种病理状态或症状，指的是在胸膜病变的基础上，由于纤维蛋白沉着和肉芽组织增生而导致胸膜厚度增加的现象。胸膜增厚通常与多种疾病或病理过程相关，如长期暴露于有害物质、胸膜炎症、胸部外伤、自身免疫性疾病和肿瘤。')">胸膜增厚</div>
          <div onclick="showDetails('心脏肥大', '心脏肥大，也称为心肌肥大，是指心脏肌肉的厚度增加，通常是由于心脏长期承受额外的压力或容量负荷导致。这种情况可能由多种原因引起，包括高血压、心脏瓣膜病、先天性心脏病或长期剧烈运动。心脏肥大可能导致心脏功能降低，增加心力衰竭和心律失常的风险。')">心脏肥大</div>
          <div onclick="showDetails('结节', '结节是身体组织中形成的小肿块，可以是良性或恶性的。结节可以在身体的任何部位出现，包括皮肤、肺部、甲状腺和乳腺。结节的形成可能与感染、炎症、自身免疫性疾病或肿瘤有关。结节的诊断通常需要影像学检查和活检来确定其性质。')">结节</div>
          <div onclick="showDetails('肿块', '肿块是指在身体组织中形成的异常肿胀或隆起，其原因多样，包括囊肿、脂肪瘤、纤维瘤或恶性肿瘤。肿块可能是无痛的，也可能是疼痛的，取决于其位置、大小和性质。肿块的诊断需要通过触诊、影像学检查和可能的活检来确定其原因和性质。')">肿块</div>
          <div onclick="showDetails('疝气', '疝气，或称疝，是指由于腹膜或腹膜后脂肪和/或腹腔内器官通过腹壁的弱点突出形成的情况。最常见的疝类型包括腹股沟疝、股疝、脐疝和切口疝。疝的发生通常与腹壁的某个部位存在缺陷或弱点有关，这些弱点可能是先天性的，也可能是后天因素如外伤、手术切口或长期腹压增高导致的结果。')">疝气</div>
          <!-- 更多疾病 -->
        </div>
        <div class="disease-details" id="diseaseDetails">
          <!-- 疾病详细解释 -->
        </div>
      </div>
    </div>
  </div>
  
  <script type="text/javascript"> 
    function showDetails(name, detail) {
      var details = document.getElementById('diseaseDetails');
      details.innerHTML = '<p><strong>' + name + '</strong></p><p>' + detail + '</p>';
      details.style.display = 'block';
    }
  </script>
  

    </DIV><!--content--></DIV></DIV><!--footer S-->
    </BODY></HTML>
    